<template>
  <view>
    <view class="list">
      <!-- 头像 -->
      <view class="changeAvatarImg" @click="changeAvatarImg">
        头像
       <image :src="userMessage.avatarUrl"></image>
       <uni-icons type="forward" size="48rpx" color="#bbb"></uni-icons>
      </view>
      <!-- 昵称 -->
      <view class="changeNickName">
        昵称
        <view class="nickName">
          {{userMessage.nickName}}
        </view>
        <button @click="open"></button>
        <uni-popup ref="popup" type="dialog">
        	<uni-popup-dialog mode="input" title="您真的要改这么好听的昵称吗？" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm" placeholder="在这里输入更换您的昵称"></uni-popup-dialog>
        </uni-popup>
        <uni-icons type="forward" size="48rpx" color="#bbb"></uni-icons>
      </view>
      <!-- 性别 -->
      <view class="changeGender">
        性别
        <button type="primary" bindtap="actioncnt" @click="changeGender">操作菜单</button>
        <view class="gender">
          {{userMessage.gender == 0 ? '男' : '女'}}
        </view>
       <uni-icons type="forward" size="48rpx" color="#bbb"></uni-icons>
      </view>
    </view>
    <button class="SignOut" @click="sign_out">退出登录</button>
  </view>
</template>

<script>
  const db = uniCloud.database()
  const collection = db.collection('jiayi-user')
  const collectionContent = db.collection('jiayi-content')
  export default {
    data() {
      return {
        userMessage: {
          nickName: '',
          gender: '',
          avatarUrl: ''
        }
      };
    },
    onShow() {
      this.getUserMessage()
    },
    methods: {
      // 获取用户信息
      getUserMessage() {
        this.userMessage.nickName =  uni.getStorageSync('jiayi_nickname')
        this.userMessage.avatarUrl = uni.getStorageSync('jiayi_avatarUrl')
        this.userMessage.gender = uni.getStorageSync('jiayi_gender')
      },
      // 更换头像
      changeAvatarImg() {
         uni.chooseImage({
        	count: 1,
        	success:(res) => {
            if (res.tempFilePaths.length > 0) {
            	let filePath = res.tempFilePaths[0]
              uni.navigateTo({
                url: '/subpkg/crop/crop?filePath=' + filePath + '&where=set'
              })
            }
        	},
        });
      },
      // 更换昵称
      open() {
      	this.$refs.popup.open()
      },
      close() {
      	this.$refs.popup.close()
      },
      async confirm(value) {
        const str = value.substr(0,27)
        const openid = uni.getStorageSync('jiayi_openid')
        this.userMessage.nickName = str
        const lastNickName = uni.getStorageSync('jiayi_nickname')
        const nickNameArray = uni.getStorageSync('jiayi_nickNameArray')
        nickNameArray.push(lastNickName)
        uni.setStorageSync('jiayi_nickname', str)
        const data = await collection.where({openID: openid}).update({nickName: str, nickNameArray: nickNameArray})
        this.$refs.popup.close()
      },
      // 更改性别
      changeGender() {
        uni.showActionSheet({
          itemList: ['男', '女'],
          success: async (res) => {
            if(res.tapIndex == 0) {
              uni.setStorageSync('jiayi_gender', 0)
              this.userMessage.gender = 0
              const openid = uni.getStorageSync('jiayi_openid')
              const data = await collection.where({openID: openid}).update({gender: 0})
            } else if(res.tapIndex == 1) {
              uni.setStorageSync('jiayi_gender', 1)
              this.userMessage.gender = 1
              const openid = uni.getStorageSync('jiayi_openid')
              const data = await collection.where({openID: openid}).update({gender: 1})
            }
          }
        })
      },
      sign_out() {
        uni.showModal({
        	title: '提示',
        	content: '您确定要退出吗？',
        	success: function (res) {
        		if (res.confirm) {
        			uni.clearStorageSync();
              uni.switchTab({
                url: '/pages/my/my'
              })
        		}
        	}
        });
      }
    }
  }
</script>

<style lang="scss">
.list {
  padding-left: 30rpx;
  background-color: #fff;
  .changeAvatarImg {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 150rpx;
    font-size: 36rpx;
    line-height: 150rpx;
    border-bottom: 1px solid #dedede;
    image {
      position: absolute;
      width: 118rpx;
      height: 118rpx;
      top: 16rpx;
      right: 76rpx;
    }
    uni-icons {
      position: absolute;
      right: 16rpx;
    }
  }
  .changeNickName {
    position: relative;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 36rpx;
    border-bottom: 1px solid #dedede;
    button {
      position: absolute;
      top: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      z-index: 998;
     }
     .nickName {
       position: absolute;
       top: 0;
       height: 100rpx;
       line-height: 100rpx;
       right: 76rpx;
       color: #444444;
     }
     uni-icons {
       position: absolute;
       right: 16rpx;
     }
  }
  .changeGender {
    position: relative;
    width: 100%;
    height: 100rpx;
    font-size: 36rpx;
    line-height: 100rpx;
    button {
      position: absolute;
      top: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      z-index: 998;
     }
     .gender {
       position: absolute;
       top: 0;
       height: 100rpx;
       line-height: 100rpx;
       right: 76rpx;
       color: #444444;
     }
     uni-icons {
       position: absolute;
       right: 16rpx;
     }
  }
}
  .SignOut {
    position: absolute;
    left: 30rpx;
    bottom: 30rpx;
    width: 700rpx;
    height: 66rpx;
    font-size: 34rpx;
    line-height: 66rpx;
    color: #fff;
    border-radius: 100rpx;
    background-color: #fc3535;
  }
</style>
